<template>
	<div class="wrapper" style="width: 100%;">
		<div class="panel-box">
			<div class="panel-title clearfix">
				<div class="detail-box pull-left">
					<a title="添加自选" v-if="!isOptionOpt" href="javascript:;" @click="addOptions"><i class="iconfont icon-wujiaoxing2"></i></a>
					<a title="删除自选" v-if="isOptionOpt" href="javascript:;" @click="deteleOptions"><i class="iconfont icon-wujiaoxing"></i></a>
					<span class="name">{{detail.name}}</span>
					<span class="code">{{detail.code}}</span>
				</div>
				<ul class="chart-title pull-right">
					<!-- 1 为分时  2 为分钟图
          <li @click="changeType(1)" :class="type=='1'?'on li-type':'li-type'"><a class="chart-type" href="javascript:;">分时</a></li>
          <li @click="changeType(2)" :class="type=='2'?'on li-type':'li-type'">
              <el-dropdown @command="handleCommand">
                  <span class="chart-type el-dropdown-link">
                      分钟<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="1" icon="el-icon-plus">1分钟</el-dropdown-item>
                      <el-dropdown-item command="5" icon="el-icon-circle-plus">5分钟</el-dropdown-item>
                      <el-dropdown-item command="15" icon="el-icon-circle-plus-outline">15分钟</el-dropdown-item>
                      <el-dropdown-item command="30" icon="el-icon-check">30分钟</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
          </li> -->
					<li @click="changeType(0)" :class="type=='0'?'on li-type':'li-type'">
						<a class="chart-type" style="font-size: 12px;" href="javascript:;">分时</a>
					</li>
					<li @click="changeType(5)" :class="type=='5'?'on li-type':'li-type'">
						<a class="chart-type" style="font-size: 12px;" href="javascript:;">5分钟</a>
					</li>
					<li @click="changeType(15)" :class="type=='15'?'on li-type':'li-type'">
						<a class="chart-type" style="font-size: 12px;" href="javascript:;">15分钟</a>
					</li>
					<li @click="changeType(30)" :class="type=='30'?'on li-type':'li-type'">
						<a class="chart-type" style="font-size: 12px;" href="javascript:;">30分钟</a>
					</li>
					<li @click="changeType(60)" :class="type=='60'?'on li-type':'li-type'">
						<a class="chart-type" style="font-size: 12px;" href="javascript:;">60分钟</a>
					</li>
					<li @click="changeType(1)" :class="type=='1'?'on li-type':'li-type'">
						<a class="chart-type" style="font-size: 12px;" href="javascript:;">日线</a>
					</li>
				</ul>
			</div>
			<div class="panel-body">
				<div class="chart-box" v-show="type === 0" ref="myEchart" style="width:100%;position: relative;" :style="'height:'+windowHeight+'px;'">
					<div v-if="emptyShow" class="empty text-center">
						<i class="iconfont icon-wushuju"></i>
						暂无数据
					</div>
				</div>
				<div class="chart-box" :style="'height:'+windowHeight+'px;'" v-show="type != 0" ref="myEchart2"></div>
			</div>
		</div>
		<div class="table">
			<div class="panel">
			</div>
		</div>
	</div>
</template>

<script>
	import * as api from '../../../axios/api'
	import echarts from 'echarts'
	import {
		Toast
	} from 'mint-ui'

	export default {
		components: {},
		props: {
			code: {
				type: String,
				default () {

				}
			},
			detail: {
				type: Object,
				default () {

				}
			}
		},
		data() {
			return {
				windowHeight: document.documentElement.clientHeight - 445, //实时屏幕高度
				emptyShow: true,
				ChartsTime: [], // 分时图时间
				ChartstFuturesTime: [], // 分时图时间
				timer: null,
				isOptionOpt: false, // 是否自选
				type: '0', // 类型
				styleName: 'red',
				data: // 分时数据
				{
					stockCode: '',
					amounts: [],
					price: [],
					rates: [],
					time: [],
					volumes: []
				},
				data2: { // 5分钟及以上的数据
					date: [],
					stockCode: '',
					stockName: '',
					values: [],
					volumes: []
				},
				k_top_closing: 99999999999
			}
		},
		watch: {
			change(newVal, oldVal) {
				if (newVal !== oldVal) {
					if (this.type === 0) {
						this.getDate() // 分时数据
					} else {
						this.getDate2(this.type)
					}
					if (this.$store.state.haslogin) {
						this.getOpation()
					}
				}
			}
		},
		computed: {
			change() {
				return this.$route.query.code
			}
		},
		created() {
			this.changeType(0)
			this.timer = setInterval(this.getDate, 60000)
		},
		beforeDestroy() {
			console.log('准备清除定时任务')
			clearInterval(this.timer)
		},
		mounted() {
			setInterval(()=>{
					this.styleName = localStorage.getItem('styleName')
					
					this.windowHeight = document.documentElement.clientHeight - 445; //实时屏幕高度
			},500)
			
			this.getDate() // 分时数据

			if (this.$store.state.haslogin) {
				this.getOpation()
			}
		},
		methods: {
			changeType(val) {
				if (val !== 0) {
					clearInterval(this.timer)
					this.getDate2(val)
				} else {
					this.getDate()
					this.timer = setInterval(this.getDate, 60000)
				}
				this.type = val
			},
			handleCommand(val) {
				// 选择分钟
				this.type = 2
				clearInterval(this.timer)
				this.getDate2(val)
			},
			async getDate2(val) {
				if (val === 1) {
					if (this.$route.query.code.indexOf('hf_') != -1) {
						//期货日线图
						let data = await api.getFuturesDayK({
							code: this.$route.query.code
						})
						if (data.status === 0) {
							this.initEchartMap2(data.data)
						} else {
							Toast(data.msg)
						}
					} else if (this.$route.query.code.indexOf('sh') != -1 || this.$route.query.code.indexOf('sz') != -1) {
						//指数日线图
						let data = await api.getIndexDayK({
							code: this.$route.query.code
						})
						if (data.status === 0) {
							this.initEchartMap2(data.data)
						} else {
							Toast(data.msg)
						}
					} else {
						//股票日线图
						let data = await api.getDayK({
							code: this.$route.query.code
						})
						if (data.status === 0) {
							this.initEchartMap2(data.data)
						} else {
							Toast(data.msg)
						}
					}

				} else {
					//期货分时图
					if (this.$route.query.code.indexOf('hf_') != -1) {
						let data = await api.getFuturesMinKEcharts({
							code: this.$route.query.code,
							time: val,
							size: 50
						})
						if (data.status === 0) {
							this.initEchartMap2(data.data)
						} else {
							Toast(data.msg)
						}
					} else if (this.$route.query.code.indexOf('sh') != -1 || this.$route.query.code.indexOf('sz') != -1) {
						let data = await api.getIndexMinKEcharts({
							code: this.$route.query.code,
							time: val,
							size: 50
						})
						if (data.status === 0) {
							this.initEchartMap2(data.data)
						} else {
							Toast(data.msg)
						}
					} else {
						// 获取分时段数据
						let opts = {
							code: this.$route.query.code,
							time: val,
							ma: 5,
							size: 50
						}
						let data = await api.getMinKEcharts(opts)
						if (data.status === 0) {
							this.initEchartMap2(data.data)
						} else {
							Toast(data.msg)
						}
					}

				}
				this.getChrtsTime()
			},
			getChrtsTime() {
				this.ChartsTime = []
				// 获取时间
				if (this.$route.query.code.indexOf('hf_HSI') != -1) {
					// 9:15~12:00
					for (var i = 9; i < 12; i++) {
						let item = ''
						for (let j = 0; j < 60; j++) {
							if (i === 9 && j < 15) {

							} else {
								let min = i
								let sec = j
								if (sec < 10) {
									sec = '0' + j
								}
								if (min < 10) {
									min = '0' + i
								}
								item = min + ':' + sec
								this.ChartsTime.push(item)
							}
						}
					}
					// 13:00~16:30
					for (var i = 13; i < 17; i++) {
						let item = ''
						for (let j = 0; j < 60; j++) {
							if (i === 16 && j > 30) {

							} else {
								let min = i
								let sec = j
								if (sec < 10) {
									sec = '0' + j
								}
								if (min < 10) {
									min = '0' + i
								}
								item = min + ':' + sec
								this.ChartsTime.push(item)
							}
						}
					}
					// 17:15~23:45
					for (var i = 17; i <= 23; i++) {
						let item = ''
						for (let j = 0; j < 60; j++) {
							if (i === 17 && j < 15) {

							} else if (i === 23 && j > 45) {

							} else {
								let min = i
								let sec = j
								if (sec < 10) {
									sec = '0' + j
								}
								if (min < 10) {
									min = '0' + i
								}
								item = min + ':' + sec
								this.ChartsTime.push(item)
							}
						}
					}
				} else if (this.$route.query.code.indexOf('hf_') != -1) {
					// 0:01 ~ 23:59
					for (var i = 0; i <= 23; i++) {
						let item = ''
						for (let j = 0; j < 60; j++) {
							let min = i
							let sec = j
							if (sec < 10) {
								sec = '0' + j
							}
							if (min < 10) {
								min = '0' + i
							}
							item = min + ':' + sec
							this.ChartsTime.push(item)
						}
					}
				} else {
					// 9:30 ~ 11:30  13:00~15:00
					for (var i = 9; i < 15; i++) {
						let item = ''
						if (i === 12) {

						} else {
							for (let j = 0; j < 60; j++) {
								if (i === 11 && j > 30) {

								} else if (i === 9 && j < 30) {

								} else {
									let min = i
									let sec = j
									if (sec < 10) {
										sec = '0' + j
									}
									if (min < 10) {
										min = '0' + i
									}
									item = min + ':' + sec
									this.ChartsTime.push(item)
								}
							}
						}
					}
				}

			},
			valuesVolumes(data) {
				// 处理成交量 现在返回的成交量是每一次分钟返回的总量
				// 用下一个数据减去上一个数据得到这分钟的成交量
				let newData = []
				data.reduce(function(previousValue, currentValue, index, array) {
					newData.push([index, currentValue - previousValue, 1])
					return currentValue
				})
				return newData
			},
			async getDate() {
				// 获取分时数据
				let opts = {
					stockCode: this.$route.query.code,
					state: 0,
					stockSpell: '',
					pageNum: 1,
					pageSize: 10
				}
				if (opts.stockCode === '' || opts.stockCode === null) {
					return
				}
				let data = await api.getMinuteLine(opts)
				if (data.status === 0) {
					this.emptyShow = false
					this.getChrtsTime() // 获取分时时间
					this.initEchartMap(data.data)
				} else {
					this.emptyShow = true
					this.$message.success(data.msg)
				}
			},
			// 分时图
			initEchartMap(data) {
				let volumesVal = [0]
				if (data.volumes !== undefined && data.volumes.length > 0) {
					volumesVal = this.valuesVolumes(data.volumes)
				}
				if (data.price !== undefined && data.price.length <= 0) {
					data.price = [0]
				}
				// let upColor = '#00da3c';
				// let downColor = '#ec0000';
				let this_ = this
				let upColor = '#ec0000'
				let downColor = '#00da3c'
				// var data = this.splitData(rawData);
				let myChart = echarts.init(this.$refs.myEchart)
				window.onresize = myChart.resize
				let option = {
					backgroundColor: this_.styleName === 'red-bg' ? '#fff' : '#171e2a',
					animation: true,
					// legend: { // 图例组件
					//     bottom: 10, // 图例组件离容器下侧的距离。
					//     left: 'center', // 图例组件离容器左侧的距离。
					//     data: data.stockName
					// },
					tooltip: { // 提示框组件 坐标轴指示器是指示坐标轴当前刻度的工具
						trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图
						axisPointer: {
							type: 'cross'
						},
						backgroundColor: 'rgba(245, 245, 245, 0.8)',
						borderWidth: 1,
						borderColor: '#ccc',
						padding: 10,
						textStyle: {
							color: '#000'
						},
						position: function(pos, params, el, elRect, size) {
							var obj = {
								top: 20
							}
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
							return obj
						},
						formatter: function(param) {
							let param2
							if (param[0].seriesName === '成交量') {
								param2 = param[0]
								param = param[1]
							} else {
								param2 = param[1]
								param = param[0]
							}
							let classFont = data.rates[param.dataIndex] < 0 ? 'green' : 'red'
							// data.rates[] 涨跌幅度 amounts 成交额
							if (param && param2) {
								return [
									'<span style="font-size:16px;font-weight:bold;margin-right:10px;">' + param.seriesName + '</span>' + param.name +
									'<hr size=1 style="margin: 3px 0">',
									// '时间：' + param.name +'</br>',
									'现价: ' + '<span class="' + classFont + '" style="font-size:16px;">' + param.value + '</span>' + '<br/>',
									'涨跌幅: ' + '<span class="' + classFont + '" style="font-size:16px;">' + data.rates[param.dataIndex] +
									'%</span>' + '<br/>',
									'成交量(手): ' + param2.value[0] / 100 + '<br/>',
									'成交额(万): ' + (data.amounts[param.dataIndex] / 10000).toFixed(2) + '<br/>'
								].join('')
							}
						}
						// extraCssText: 'width: 170px'
					},
					axisPointer: { // 坐标轴指示器
						link: {
							xAxisIndex: 'all'
						},
						label: {
							backgroundColor: '#ccc' // hover  number bg
						}
					},
					toolbox: { // 工具栏
						feature: { // 各工具配置项。//除了各个内置的工具按钮外，还可以自定义工具按钮。
							dataZoom: { // 数据区域缩放
								yAxisIndex: false
							},
							brush: { // 选框组件的控制按钮
								type: ['clear']
							}
						}
					},
					brush: { // brush 是区域选择组
						xAxisIndex: 'all',
						brushLink: 'all',
						outOfBrush: {
							colorAlpha: 0.1
						}
					},
					visualMap: { // visualMap 是视觉映射组件，
						show: false,
						seriesIndex: 5,
						dimension: 2,
						pieces: [{
							value: 1,
							color: upColor
						}, {
							value: -1,
							color: downColor
						}]
					},
					grid: [ // 直角坐标系内绘图网格  设置表格的位置
						{
							left: '6%',
							right: '4%',
							height: '65%',
							top: '10%'
						},
						{
							left: '6%',
							right: '4%',
							top: '78%',
							height: '20%'
						}
					],
					xAxis: [{
							type: 'category',
							data: this_.ChartsTime,
							scale: true,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							splitLine: {
								show: false
							},
							splitNumber: 20,
							min: 'dataMin',
							max: 'dataMax',
							axisPointer: {
								z: 100
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: this_.styleName === 'red-bg' ? '#666' : '#ccc'
								}
							}
						},
						{
							type: 'category',
							gridIndex: 1,
							data: this_.ChartsTime,
							scale: true,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							splitNumber: 20,
							min: 'dataMin',
							max: 'dataMax'
							// axisPointer: {
							//     label: {
							//         formatter: function (params) {
							//             var seriesValue = (params.seriesData[0] || {}).value;
							//             return params.value
							//             + (seriesValue != null
							//                 ? '\n' + echarts.format.addCommas(seriesValue)
							//                 : ''
							//             );
							//         }
							//     }
							// }
						}
					],
					yAxis: [{
							scale: true,
							splitArea: { // 设置y轴分割块颜色
								show: false,
								areaStyle: {
									color: ['rgba(33,37,42,1)', 'rgba(33,37,42,1)'],
									opacity: 0
								}
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: this_.styleName === 'red-bg' ? '#666' : '#ccc'
								}
							},
							splitLine: {
								lineStyle: {
									// 使用深浅的间隔色
									color: this_.styleName === 'red-bg' ? '#eee' : '#1e242f' // 分割线
								}
							}
						},
						{
							scale: true,
							gridIndex: 1,
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							}
						}
					],
					dataZoom: [{
							type: 'inside',
							xAxisIndex: [0, 1],
							start: 0,
							end: 100
						},
						{
							show: false,
							xAxisIndex: [0, 1],
							type: 'slider',
							top: '65%',
							start: 0,
							end: 100
						}
					],
					series: [{
							name: data.stockCode,
							type: 'candlestick',
							data: data.values,
							symbol: 'none',
							itemStyle: {
								normal: {
									color: upColor,
									color0: downColor,
									borderColor: null,
									borderColor0: null
								}
							},
							tooltip: {
								formatter: function(param) {
									param = param[0]
									return [
										'开盘: ' + param.data[0] + '<br/>',
										'收盘: ' + param.data[1] + '<br/>',
										'最低: ' + param.data[2] + '<br/>',
										'最高: ' + param.data[3] + '<br/>'
									].join('')
								}
							}
						},
						{
							name: data.stockCode,
							type: 'line',
							data: [],
							// smooth: true,
							symbol: 'none',
							areaStyle: {
								opacity: 0.5
							},
							lineStyle: {
								normal: {
									opacity: 0.5
								}
							}
						},
						{
							name: 'MA10',
							type: 'line',
							data: [],
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 0.5
								}
							}
						},
						{
							name: data.stockCode,
							type: 'line',
							data: data.price,
							smooth: true,
							symbol: 'none', // 折线点是否显示
							lineStyle: {
								// color:'#7cb5ec',
								color: this_.styleName === 'red-bg' ? '#7cb5ec' : '#3e5281'
								// normal: {opacity: 0.5}
							},
							itemStyle: {
								color: '#3e5281' // 线条颜色
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: this_.styleName === 'red-bg' ? 'rgba(117, 156, 247, 0.5)' : 'rgba(62, 82, 129,0.5)'
								}, {
									offset: 1,
									color: this_.styleName === 'red-bg' ? 'rgba(117, 156, 247, 0)' : 'rgba(62, 82, 129,0)'
								}])
							}
						},
						{
							name: 'MA30',
							type: 'line',
							data: [],
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 0.5
								}
							}
						},
						{
							name: '成交量',
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1,
							itemStyle: {
								color: '#c23531'
							},
							data: volumesVal
						}
					]
				}
				myChart.setOption(option)
			},
			// 分时端图
			initEchartMap2(data) {
				let this_ = this
				let upColor = '#00da3c'
				let downColor = '#ec0000'
				// var data = this.splitData(rawData);
				let myChart = echarts.init(this.$refs.myEchart2)
				window.onresize = myChart.resize
				let option = {
					backgroundColor: this_.styleName === 'red-bg' ? '#fff' : '#171e2a',
					animation: true,
					legend: { // 图例组件
						bottom: 10, // 图例组件离容器下侧的距离。
						left: 'center', // 图例组件离容器左侧的距离。
						data: data.stockName
					},
					tooltip: { // 提示框组件 坐标轴指示器是指示坐标轴当前刻度的工具
						trigger: 'axis', // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图
						axisPointer: {
							type: 'cross'
						},
						backgroundColor: 'rgba(245, 245, 245, 0.8)',
						borderWidth: 1,
						borderColor: '#ccc',
						padding: 10,
						textStyle: {
							color: '#000'
						},
						position: function(pos, params, el, elRect, size) {
							var obj = {
								top: 20
							}
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
							return obj
						},
						formatter: function(param) {
							let param2
							if (param[0].seriesName === '成交量') {
								param2 = param[0]
								param = param[1]
							} else {
								param2 = param[1]
								param = param[0]
							}
							if (param) {
								return [
									param.seriesName + '<hr size=1 style="margin: 3px 0">',
									'开盘: ' + param.data[1] + '<br/>',
									'收盘: ' + param.data[2] + '<br/>',
									'最低: ' + param.data[3] + '<br/>',
									'最高: ' + param.data[4] + '<br/>',
									'成交量(手): ' + param2.data[1] / 100 + '<br/>',
									param.name
								].join('')
							}
						}
						// extraCssText: 'width: 170px'
					},
					axisPointer: { // 坐标轴指示器
						link: {
							xAxisIndex: 'all'
						},
						label: {
							backgroundColor: '#777' // hover  number bg
						}
					},
					toolbox: { // 工具栏
						feature: { // 各工具配置项。//除了各个内置的工具按钮外，还可以自定义工具按钮。
							dataZoom: { // 数据区域缩放
								yAxisIndex: false
							},
							brush: { // 选框组件的控制按钮
								type: ['clear']
							}
						}
					},
					brush: { // brush 是区域选择组
						xAxisIndex: 'all',
						brushLink: 'all',
						outOfBrush: {
							colorAlpha: 0.1
						}
					},
					visualMap: { // visualMap 是视觉映射组件，
						show: false,
						seriesIndex: 5,
						dimension: 2,
						pieces: [{
							value: 1,
							color: downColor
						}, {
							value: -1,
							color: upColor
						}]
					},
					grid: [ // 直角坐标系内绘图网格  设置表格的位置
						{
							left: '6%',
							right: '4%',
							height: '50%',
							top: '10%'
						},
						{
							left: '6%',
							right: '4%',
							top: '78%',
							height: '20%'
						}
					],
					xAxis: [{
							type: 'category',
							data: data.date,
							scale: true,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							splitLine: {
								show: false
							},
							splitNumber: 20,
							min: 'dataMin',
							max: 'dataMax',
							axisPointer: {
								z: 100
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: this_.styleName === 'red-bg' ? '#666' : '#ccc'

								}
							}
						},
						{
							type: 'category',
							gridIndex: 1,
							data: data.date,
							scale: true,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							},
							axisLabel: {
								show: false
							},
							splitNumber: 20,
							min: 'dataMin',
							max: 'dataMax'
							// axisPointer: {
							//     label: {
							//         formatter: function (params) {
							//             var seriesValue = (params.seriesData[0] || {}).value;
							//             return params.value
							//             + (seriesValue != null
							//                 ? '\n' + echarts.format.addCommas(seriesValue)
							//                 : ''
							//             );
							//         }
							//     }
							// }
						}
					],
					yAxis: [{
							scale: true,
							splitArea: { // 设置y轴分割块颜色
								show: false,
								areaStyle: {
									color: ['rgba(33,37,42,1)', 'rgba(33,37,42,1)'],
									opacity: 0
								}
							},
							axisLabel: {
								show: true,
								textStyle: {
									color: this_.styleName === 'red-bg' ? '#666' : '#ccc'
								}
							},
							splitLine: {
								lineStyle: {
									// 使用深浅的间隔色
									color: this_.styleName === 'red-bg' ? '#eee' : '#1e242f' // 分割线
								}
							}
						},
						{
							scale: true,
							gridIndex: 1,
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							}
						}
					],
					dataZoom: [{
							type: 'inside',
							xAxisIndex: [0, 1],
							start: 0,
							end: 100
						},
						{
							show: false,
							xAxisIndex: [0, 1],
							type: 'slider',
							top: '65%',
							start: 0,
							end: 100
						}
					],
					series: [{
							name: data.stockName,
							type: 'candlestick',
							data: data.values,
							itemStyle: {
								normal: {
									color: downColor,
									color0: upColor,
									borderColor: null,
									borderColor0: null
								}
							},
							tooltip: {
								formatter: function(param) {
									param = param[0]
									return [
										'开盘: ' + param.data[0] + '<br/>',
										'收盘: ' + param.data[1] + '<br/>',
										'最低: ' + param.data[2] + '<br/>',
										'最高: ' + param.data[3] + '<br/>'
									].join('')
								}
							}
						},
						{
							name: '成交量',
							type: 'bar',
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data.volumes
						}
					]
				}
				myChart.setOption(option)
			},
			async getOpation() {
				// 获取是不是已添加自选
				let opts = {
					code: this.$route.query.code
				}
				let data = await api.isOption(opts)
				if (data.status === 0) {
					// 0 --> 未添加
					this.isOptionOpt = false
				} else {
					this.isOptionOpt = true
				}
			},
			async addOptions() {
				let data = await api.addOption({
					code: this.$route.query.code
				})
				if (data.status === 0) {
					this.$message.success('添加自选成功')
					this.isOptionOpt = true
				} else {
					this.$message.error(data.msg)
				}
			},
			async deteleOptions() {
				let data = await api.delOption({
					code: this.$route.query.code
				})
				if (data.status === 0) {
					this.$message.success('删除自选股成功')
					this.isOptionOpt = false
				} else {
					this.$message.error(data.msg)
				}
			},
			// 获取当前时间
			getNewDateYMD() {
				// 获取当前时间
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				let nowDate = year + '-' + month + '-' + day
				return nowDate
			},
			// 获取当前时间的前几天时间 ns 指几天前的时间
			getBeforeDate(ns) {
				let n = ns
				let d = new Date()
				let year = d.getFullYear()
				let mon = d.getMonth() + 1
				let day = d.getDate()
				if (day <= n) {
					if (mon > 1) {
						mon = mon - 1
					} else {
						year = year - 1
						mon = 12
					}
				}
				d.setDate(d.getDate() - n)
				year = d.getFullYear()
				mon = d.getMonth() + 1
				day = d.getDate()
				let s = year + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day)
				return s
			},
			// 获取当前时间
			getPresent() {
				// 获取当前时间
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				let hh = date.getHours()
				let mm = date.getMinutes()
				let ss = date.getSeconds()
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				let nowDate = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss
				return nowDate
			},
			// 获取当前时间n个小时前的时间段
			getPresentNbeforeTime(n) {
				// 获取当前时间
				let date = new Date()
				let dates = new Date(date.getTime() - n * 60 * 60 * 1000)
				let year = dates.getFullYear()
				let month = dates.getMonth() + 1
				let day = dates.getDate()
				let hh = dates.getHours()
				let mm = dates.getMinutes()
				let ss = dates.getSeconds()
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				let nowDate = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss
				return nowDate
			},
			// 参数number为毫秒时间戳，format为需要转换成的日期格式
			formatTime(number, format) {
				let time = new Date(number)
				let newArr = []
				let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
				newArr.push(time.getFullYear())
				newArr.push(this.formatNumber(time.getMonth() + 1))
				newArr.push(this.formatNumber(time.getDate()))

				newArr.push(this.formatNumber(time.getHours()))
				newArr.push(this.formatNumber(time.getMinutes()))
				newArr.push(this.formatNumber(time.getSeconds()))

				for (let i in newArr) {
					format = format.replace(formatArr[i], newArr[i])
				}
				return format
			},
			// 格式化日期，如月、日、时、分、秒保证为2位数
			formatNumber(n) {
				n = n.toString()
				return n[1] ? n : '0' + n
			}
		}
	}
</script>
<style lang="less" scoped>
	.panel-box {
		// background: #1a202c;
		// padding: 0 5px;

		.panel-title {
			padding: 3px 10px;
		}

		.panel-body {
			// background: #171e2a;
			position: relative;

			.chart-box {
				height: 480px;
			}
		}
	}

	.chart-title {
		line-height: 35px;

		.li-type {
			float: left;

			&.on {
				.chart-type {
					color: #efbb53;
				}
			}
		}

		.chart-type {
			color: #5a657e;
			font-size: 14px;
			padding: 7px 5px;
			height: 14px;
			font-weight: 800;
		}
	}

	.detail-box {
		height: 40px;
		line-height: 40px;

		.name {
			color: #efbb53;
			font-size: 16px;
			margin-left: 8px;
		}

		.code {
			color: #9e9e9e;
			margin-left: 6px;
		}
	}

	.empty {
		padding-top: 100px;
		color: #5a657e;

		.iconfont {
			display: block;
			font-size: 120px;
			color: #5a657e;
			margin-bottom: 20px;
		}
	}
</style>
